<div class="kuiSideBarSection kuiSideBarSection__main">
  <div class="kuiSideBarSectionTitle">
    <div class="kuiSideBarSectionTitle__text">
      X-Axis
    </div>
  </div>

  <!-- General -->
  <div class="kuiSideBarSection">
    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="categoryAxisShow">
        Show
      </label>
      <div class="kuiSideBarFormRow__control">
        <input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="vis.params.categoryAxes[0].show">
      </div>
    </div>

    <div class="kuiSideBarFormRow">
      <label class="kuiSideBarFormRow__label" for="categoryAxisPosition">
        Position
      </label>
      <div class="kuiSideBarFormRow__control">
        <select
          id="categoryAxisPosition"
          class="kuiSelect kuiSideBarSelect"
          ng-model="vis.params.categoryAxes[0].position"
          ng-options="mode for mode in vis.type.editorConfig.collections.positions"
        ></select>
      </div>
    </div>
  </div>

  <!-- Advanced options -->
  <div class="kuiSideBarSection">
    <a
      class="kuiSideBarOptionsLink"
      ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
      kbn-accessible-click
    >
      <span
        aria-hidden="true"
        ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
        class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
      ></span>
      <span class="kuiSideBarOptionsLink__text">
        <span ng-show="!isCategoryAxisAdvancedOptionsOpen">
          Show
        </span>
        <span ng-show="isCategoryAxisAdvancedOptionsOpen">
          Hide
        </span>
        Advanced Options
      </span>
    </a>

    <div ng-show="isCategoryAxisAdvancedOptionsOpen">
      <!-- Labels -->
      <div class="kuiSideBarSection">
        <h6 class="kuiSideBarFormSectionTitle">
          Labels
        </h6>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="categoryAxisShowLabels">
            Show Labels
          </label>
          <div class="kuiSideBarFormRow__control">
            <input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.show">
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="categoryAxisShowFilter">
            Filter Labels
          </label>
          <div class="kuiSideBarFormRow__control">
            <input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="vis.params.categoryAxes[0].labels.filter">
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="categoryAxisSotateLabels">
            Rotate
          </label>
          <div class="kuiSideBarFormRow__control">
            <select
              id="categoryAxisSotateLabels"
              class="kuiSelect kuiSideBarSelect"
              ng-model="vis.params.categoryAxes[0].labels.rotate"
              ng-options="mode.value as mode.name for mode in rotateOptions"
            ></select>
          </div>
        </div>

        <div class="kuiSideBarFormRow">
          <label class="kuiSideBarFormRow__label" for="categoryAxisSruncateLabels">
            Truncate
          </label>
          <div class="kuiSideBarFormRow__control">
            <input
              id="categoryAxisSruncateLabels"
              class="kuiInput kuiSideBarInput"
              type="number"
              ng-model="vis.params.categoryAxes[0].labels.truncate"
            >
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
